<%include ../top.html %>
    <style>
    * { margin: 0; padding: 0; }
    body { background: #228ff4; }
   
    .hand {width:220px; height: 300px; background: url(/wxapp/activity/images/shake.png) no-repeat; position: absolute;  left: 50%; margin-left: -105px; }
    
    .hand-animate { -webkit-animation: hand_move infinite 2s; }
    .result { background: #393B3C; border: #2C2C2C 1px solid; box-shadow: inset #4D4F50 0 0 0 1px; border-radius: 10px; color: #fff; padding: 10px; width:300px; position: absolute; top:360px; left: 50%;margin-left: -161px; opacity: 0;
        -webkit-transition: all 1s;
           -moz-transition: all 1s;
            -ms-transition: all 1s;
             -o-transition: all 1s;
                transition: all 1s; }
    .result .pic { width: 50px; height: 50px; float: left; background: #fff; }
    .result .con { overflow: hidden; zoom: 1; padding-left: 10px; line-height: 24px; }
    .result-show { opacity: 1; margin-top: 50px; }
   
    .tishi{ position: absolute; top:380px;z-index:10;left:47%;background:white;color:#2191f5;margin-left:-70px;text-align:center;font-family:微软雅黑 ;font-size:17px;padding:5px 20px;border-radius:10px;}
    
    .loading { position: absolute; top:300px;z-index:20; left: 50%; margin-left: -50px; width: 100px; height: 100px; background: url(/wxapp/activity/images/spinner.png) no-repeat; background-size: 100px 100px; opacity: 0;
        -webkit-animation: loading infinite linear .5s;
           -moz-animation: loading infinite linear .5s;
            -ms-animation: loading infinite linear .5s;
             -o-animation: loading infinite linear .5s;
                animation: loading infinite linear .5s;
        -webkit-transition: all .5s;
           -moz-transition: all .5s;
            -ms-transition: all .5s;
             -o-transition: all .5s;
                transition: all .5s; }
                
    .loading-show { opacity: 1; }
    
    @-webkit-keyframes hand_move {
        0% {
            -webkit-transform: rotate(0);
               -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0); }
        50% {
            -webkit-transform: rotate(15deg);
               -moz-transform: rotate(15deg);
                -ms-transform: rotate(15deg);
                 -o-transform: rotate(15deg);
                    transform: rotate(15deg); }
        100% {
            -webkit-transform: rotate(0);
               -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0); }
    }
    @-webkit-keyframes loading {
        0% {
            -webkit-transform: rotate(0);
               -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0); }
        100% {
            -webkit-transform: rotate(360deg);
               -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                 -o-transform: rotate(360deg);
                    transform: rotate(360deg); }
    }

    .link a{color:white;}

    </style>

<body>
    <input type="hidden" value="<%=locals.wxopenid%>" id="wxID"/>
    <div class="am-g">
    	<img src="/wxapp/activity/images/top.png" style="width:100%"/>
    </div>
    <div class="am-g">
    	 <div id="hand" class="hand hand-animate">
    	 </div>
    </div>
    <div class="tishi">
    	今天还剩<span id="cishu"><%=locals.todaycishu%></span>次机会
    </div>
    <div id="loading" class="loading"></div>
    <a href="#" id="hrefurl">
    <div id="result" class="result" style="z-index: 999">
        <div class="pic">
        	<img src=""  id="pic" style="width:50px;height: 50px;border:none;"/>
        </div>
        <div class="con">
        	<span id="sp1">摇晃结果</span><br>
        	<span id="sp2">摇晃结果的其他信息哈哈哈</span>
        </div>
    </div>
    </a>

    
    <div class="am-g am-topbar-fixed-bottom" style="text-align: center;margin:20px auto;z-index:10">
	   <img src="/activity/images/jszc.png" style="width:50px"/>
    </div>
    
    <div style="display:none">
	    <audio style="display:hiden" id="musicBox" preload="metadata" controls src="" autoplay="false">  
	    </audio>  
    </div>
    
    <script>
    	function onBridgeReady(){
		 	WeixinJSBridge.call('hideOptionMenu');  //隐藏微信右上角按钮
		}
		
		if (typeof WeixinJSBridge == "undefined"){
		    if( document.addEventListener ){
		        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
		    }else if (document.attachEvent){
		        document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
		        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
		    }
		}else{
		    onBridgeReady();
		}
    
	    var SHAKE_THRESHOLD = 3000;
	    var last_update = 0;
	    var x = y = z = last_x = last_y = last_z = 0;
	    var chouStarTime = 0;
	    var chouEndTime = 0;
	    
	    var zjFlag = 0;
	
	    if (window.DeviceMotionEvent) {
	        window.addEventListener('devicemotion', deviceMotionHandler, false);
	    } else {
	        alert('本设备不支持devicemotion事件');
	    }
	    
	    
	    function deviceMotionHandler(eventData) {
	    	
	        var acceleration = eventData.accelerationIncludingGravity;
	        var curTime = new Date().getTime();
	        
	        //alert(curTime);
	
	        if ((curTime - last_update) > 100) {
	        	
	            var diffTime = curTime - last_update;
	            last_update = curTime;
	            x = acceleration.x;
	            y = acceleration.y;
	            z = acceleration.z;
	            var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
	            
	            var status = document.getElementById("status");
	            var cishu = document.getElementById("cishu").innerHTML;
	            //alert(cishu);
	            if (speed > SHAKE_THRESHOLD) {
	            	if(zjFlag == 0 && cishu != '0'){
	            		chouStarTime = new Date().getTime();
	            		//alert(chouStarTime - chouEndTime);
	            		if(chouStarTime - chouEndTime > 3000){
	            			doResult();   //摇晃事件	
	            			chouEndTime = chouStarTime;	
	            		}
	            	}
	            }
	            
	            last_x = x;
	            last_y = y;
	            last_z = z;
	        }
	    }
	    
	    //摇晃结果
	    function doResult() {
	    	//document.getElementById("musicBox").setAttribute('src','/mp3/1.mp3');  //摇了之后的声音
	    	$("#musicBox").attr('src','/wxapp/activity/images/1.mp3');     //摇晃时的声音
	        document.getElementById("result").className = "result";
	        document.getElementById("loading").className = "loading loading-show";
	        //开始抽奖
	        $.get('/activity/award/choujiang',{'wxID':$("#wxID").val()},function(data){
    	        chouEndTime = new Date().getTime();
    	        //alert(chouEndTime)
				switch(data.msg)
				{
					case "次数上限":
					    $("#cishu").text('0');
					    $("#sp1").text("抱歉！");
                        $("#sp2").text("已达到今天摇一摇次数上限，明天再来哟！");
						break;
					case "没中":
						if(data.data==0){
							$("#cishu").text('2');
							$("#sp1").text("不要灰心");
                            $("#sp2").text("也许下一个中奖者就是你呢");
							
						}else if(data.data==1){
							$("#cishu").text('1');
							$("#sp1").text("不要灰心");
                            $("#sp2").text("也许下一个中奖者就是你呢");
							//alert("今天还有1次抽奖机会");
							
						}else if(data.data==2){
							$("#cishu").text('0');
							$("#sp1").text("抱歉！");
                            $("#sp2").text("已达到今天摇一摇次数上限，明天再来哟！");
							//alert("今天还有0次抽奖机会");
							
						}
						
						$("#pic").attr('src','/activity/images/mzj.gif');
						
						$("#hrefurl").attr('href','#'); 
						
						break;
						
					case "中了":
					    zjFlag = 1;
				    	$(".tishi").hide();
				    	$("#sp1").text("恭喜您");
                        $("#sp2").text("获得经典话剧《小红帽》观影券2张，点击登记领取信息");
                        $("#sp2").css('color','red');
                        
						$("#pic").attr('src','/activity/images/zj.jpg');
						$("#hrefurl").attr('href','/activity/award/writeinfo?lotteryId='+data.lotteryId); //去填写信息
						break;
						
					case "当月中过":
					    //alert("当月中过");
					    if(data.data==0){
					    	$("#cishu").text('2');
							$("#sp1").text("不要灰心");
                            $("#sp2").text("也许下一个中奖者就是你呢");
						}else if(data.data==1){
							$("#cishu").text('1');
							$("#sp1").text("不要灰心");
                            $("#sp2").text("也许下一个中奖者就是你呢");
						
						}else if(data.data==2){
							$("#cishu").text('0');
							$("#sp1").text("抱歉！");
                            $("#sp2").text("已达到今天摇一摇次数上限，明天再来哟！");
						}else{
							$("#cishu").text('0');
							$("#sp1").text("抱歉！");
                            $("#sp2").text("已达到今天摇一摇次数上限，明天再来哟！");
						}
						$("#pic").attr('src','/activity/images/mzj.gif');
						$("#hrefurl").attr('href','#'); 
						break;
						
				  	default:
						break;
		         }
	        	
	        });
	        
	        setTimeout(function(){
	        	$("#musicBox").attr('src','/wxapp/activity/images/2.mp3');     //出结果的声音
	            //document.getElementById("hand").className = "hand";
	            document.getElementById("result").className = "result result-show";
	            document.getElementById("loading").className = "loading";
	        }, 3000);
	    }
    
    </script>
	</body>
</html>